<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="alertMessage">
        <div class="message">1</div>
    </div>
    <div class="box">
        <div v-show="isShow" class="login">
            <h3 class="skyblue">登录账号</h3>
            <div class="textBox">
                <input type="text" autocomplete="off" class="username" id="username" placeholder="账号/用户名/邮箱">
                <input type="password" class="password" id="password" placeholder="至少六位数字的密码">
                <div class="clearfix yanzhengfather">
                    <input type="text" class="left yanzheng" id="yanzheng" placeholder="输入验证码">
                    <div class="right yanzhengma">验证码</div>
                </div>
            </div>
            <br>
            <div class="clearfix">
                <div class="left">
                    <input type="checkbox" class="rememberPassworld" name="rememberPassworld" id="rememberPassworld">
                    <label class="wangmimalabel" for="rememberPassworld">记住密码</label>
                    <span class="description">可别,别让我帮你记密码</span>
                </div>
                <div class="right forget">
                    <a id="forgetPassword" href="javascript:;" class="forget" >忘记密码?</a>
                </div>
            </div>
            <button id="loginNow" class="loginNow"> 立即登录</button>
            <hr>
            <button id="goRegister" class="registerNow"> 没有账号? 3 秒注册</button>
        </div>
        <div v-show="!isShow" class="register">
            <h3 class="skyblue">注册账号</h3>
            <div class="textBox">
                <input type="text" autocomplete="off" class="username" id="reg_username" placeholder="注册使用的用户名">
                <input type="password" class="password" id="reg_password" placeholder="至少六位数字的密码">
                <input type="password" class="okpassword" id="okpassword" placeholder="请再输入一次确认密码">
                <input type="email" class="email" id="email" placeholder="请输入邮箱,用于找回密码">
                <div class="clearfix yanzhengfather">
                    <input type="text" class="left yanzheng" id="reg_yanzheng" placeholder="输入验证码">
                    <div class="right yanzhengma">验证码</div>
                </div>
            </div>
            <br>
            <div class="clearfix">
                <div class="left">
                    <input type="checkbox" class="rememberPassworld rememberMain" name="rememberPassworld"
                        id="rememberMain">
                    <label class="wangmimalabel" for="rememberPassworld" id="rememberMain">
                        <a href="javascript:;"
                            style=" color:slateblue; text-decoration: underline; margin-right: 7px;">关于隐私</a>
                        <a href="javascript:;" style=" color:slateblue; text-decoration: underline;">其他安全条款</a>
                    </label>
                </div>
                <div class="right forget">
                </div>
            </div>
            <button id="okRegister" class="loginNow" disabled title="请先同意条款"> 完成注册</button>
            <p id="goLogin" class="gologin">已有账号?,<a href="javascript:;"
                    style="color: slateblue; text-decoration: underline;">前去登录</a></p>
        </div>
    </div>
</body>

<script src="./js/vue.js"></script>
<script>
    let box = new Vue({
        el: document.querySelector('.box'),
        data: {
            isShow: true,
        },
        method: {

        }
    });
</script>
<script src="./js/index.js"></script>

</html>